<template>
    <el-dialog title="已删除清单" :visible.sync="visible" width="944px" append-to-body :close-on-click-modal="false">
        <BasePage :show-shadow="false">
            <el-form slot="form" :inline="true" size="medium">
                <el-form-item label="清单子目编码">
                    <el-input v-model="query.listSubitemCode" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item label="清单子目名称">
                    <el-input v-model="query.listSubitemName" placeholder="请输入"></el-input>
                </el-form-item>
                <el-form-item>
                    <BaseButton @click="handleFilter">查询</BaseButton>
                    <BaseButton type="second" @click="handleReset">重置</BaseButton>
                </el-form-item>
            </el-form>
            <BaseTable slot="table" ref="table" v-loading="listLoading" row-key="id" :data="list" :columns="columns" highlight-current-row height="284px" @sort-change="handleSortChange">
                <template #chapterName="{ scope: { row } }">
                    <span v-if="type === 1">{{ row.chapterSequenceCode + '章 ' + row.chapterSequenceName }}</span>
                    <span v-if="type === 2">{{ row.chapterSequenceName }}</span>
                </template>
            </BaseTable>
            <Pagination
                slot="pagination"
                :current-page.sync="page.pageNo"
                :page-size.sync="page.pageSize"
                :total="page.total"
                @size-change="getList"
                @current-change="getList"
            />
        </BasePage>
        <div slot="footer" class="dialog-footer">
            <BaseButton @click="cancel">确认</BaseButton>
        </div>
    </el-dialog>
</template>

<script>
import { ContractModel } from '@/models'
import BasePage from '@/layouts/BasePage'

export default {
    name: 'DeleteList',
    components: {
        BasePage,
    },
    props: {
        type: {
            type: Number,
            default: 1 // type=1:普通工程量清单；type=2:计日工
        },
    },
    data() {
        return {
            model: new ContractModel(),
            visible: false,
            submitLoading: false,
            page: {
                pageNo: 1,
                pageSize: 10,
                total: 0
            },
            listLoading: false,
            columns: [
                {
                    slot: 'chapterName',
                    attrs: {
                        label: this.type === 1 ? '章次' : '分类',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '清单子目编码',
                        prop: 'listSubitemCode',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '清单子目名称',
                        prop: 'listSubitemName',
                        width: '120',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '单位',
                        prop: 'unitSymbol',
                        width: '130'
                    }
                },
                {
                    attrs: {
                        label: '数量',
                        prop: 'quantity',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '单价（元）',
                        prop: 'price',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '合价（元）',
                        prop: 'amount',
                        width: '160',
                        'show-overflow-tooltip': true
                    }
                },
                {
                    attrs: {
                        label: '备注',
                        prop: 'remark',
                        'show-overflow-tooltip': true,
                        width: '160'
                    }
                },
                {
                    attrs: {
                        label: '删除时间',
                        prop: 'updateTime',
                        sortable: 'custom',
                        width: '160'
                    }
                },
                {
                    attrs: {
                        label: '删除人',
                        prop: 'operatorName',
                        width: '140',
                        'show-overflow-tooltip': true
                    }
                },
            ],
            list: [],
            query: {
                listSubitemCode: '',
                listSubitemName: '',
                sort: 2
            },
            contractId: '',
            chapterName: ''
        }
    },
    methods: {
        handleSortChange({ column, prop, order }) {  
            if (prop === 'updateTime') {
                if (order === 'ascending') {  
                    this.query.sort = 1
                } else if (order === 'descending') {
                    this.query.sort = 2 
                } else {
                    this.query.sort = 2
                }
            }
            this.page.pageNo = 1
            this.getList()
        },
        // 取消按钮
        cancel() {
            this.visible = false
        },
        open(options) {
            this.visible = true
            const {contractId, chapterName} = options
            this.contractId = contractId
            this.chapterName = chapterName
            this.handleReset()
        },
        handleReset() {
            this.query = {
                listSubitemCode: '',
                listSubitemName: '',
                sort: 2
            }
            this.handleFilter()
        },
        handleFilter() {
            this.page.pageNo = 1
            this.getList()
        },
        getList() {
            this.listLoading = true
            this.model
                .delList({
                    contractId: this.contractId,
                    type: this.type,
                    ...this.query,
                    ...this.page
                })
                .then((res) => {
                    this.list = res.list
                    this.page.total = res.totalCount
                })
                .finally(() => {
                    this.listLoading = false
                })
        }
    }
}
</script>

<style lang="scss" scoped>
.w-300 {
    width: 300px;
}
</style>
